import { SearchBar, Toast } from 'antd-mobile'
import { PullToRefresh, List } from 'antd-mobile'
import { PullStatus } from 'antd-mobile/es/components/pull-to-refresh'
import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { getVolunteerActivityList, VolunteerRegister } from './api/volunteerService'

export default function VolunteeActivity() {
    // 评论页数
    const [pageNum, setPageNum] = useState(1)
    // 评论一页显示评论数量
    const [pageSize, setPageSize] = useState(10)
    // 总页数
    const [pages, setPages] = useState(5)
    // 志愿活动列表
    const [activityList, setActivityList] = useState([])
    // 报名状态
    const [newState, setNewState] = useState(false)

    // 获取所有志愿活动列表
    async function getActivityList(params: any) {
        if (pageNum >= pages) return
        const res = await getVolunteerActivityList(params)
        // console.log(res);

        setActivityList(res.data.rows.concat(activityList))
        setPages(Math.ceil(res.data.total / pageSize))
    }

    useEffect(() => {
        getActivityList({ pageNum, pageSize })
    }, [])

    const statusRecord: Record<PullStatus, string> = {
        pulling: '用力拉',
        canRelease: '松开吧',
        refreshing: '玩命加载中...',
        complete: '好啦',
    }

    // 跳转至列表详情页
    const history = useHistory()
    function toDetail(id: any) {
        history.push('/voluntee/activity/detail/' + id)
    }

    // 报名/取消报名活动
    async function registerVolunteer(id: any) {
        const res = await VolunteerRegister({ activityId: id, newState: !newState })
        // console.log(res);
        if (res.data.code === 200) {
            setNewState(!newState)
        } else {
            Toast.show({
                content: res.data.msg,
            })
        }
    }

    // 搜索框
    async function searchFilter(val: any) {
        if (val) {
            const res = await getVolunteerActivityList({})
            // console.log(res);
            const res1 = res.data.rows.filter((item: any) => {
                return item.title.includes(val)
            })
            // console.log(res1);
            setActivityList(res1)
        } else {
            const res = await getVolunteerActivityList({ pageNum: 1, pageSize })
            setActivityList(res.data.rows)
            setPageNum(1)
        }
    }

    return (
        <div>
            <PullToRefresh
                onRefresh={async () => {
                    getActivityList({ pageNum: pageNum + 1, pageSize })
                    if (pageNum < pages) setPageNum(pageNum + 1)
                }}
                renderText={status => {
                    return <div>{statusRecord[status]}</div>
                }}
            >
                <List>
                    <div className='v-ac-input'>
                        <SearchBar placeholder='请输入内容' onSearch={val => {
                            searchFilter(val)
                        }} />
                    </div>
                </List>

                <List>
                    {activityList.map((item: any, index) => (
                        <List.Item key={index}>
                            <div onClick={() => { toDetail(item.id) }}>
                                <div>{item.title}</div>
                                <div><span style={{ fontWeight: 900 }}>承办单位：</span><span style={{ color: 'skyblue' }}>{item.undertaker}</span></div>
                                <div><span style={{ fontWeight: 900 }}>开始时间：</span><span style={{ color: 'orange' }}>{item.startAt}</span></div>
                                <div><span style={{ fontWeight: 900 }}>人员要求：</span><span style={{ color: 'green' }}>{item.requireText}</span></div>
                            </div>
                            <button style={{ background: 'orangered', padding: '5px', border: 0 }}
                                onClick={() => { registerVolunteer(item.id) }}
                            >点击报名</button>
                        </List.Item>
                    ))}
                </List>
            </PullToRefresh>
        </div>
    )
}
